<template>
  <div class="choseclass-wrap">
    <div v-title style="display: none">学车班别</div>
    <div v-for="(item,index) in classList" class="choseclass-item">
      <div class="choseclass-img">
        <router-link :to="'/classDetail/'+item.id"><img :src="'http://cj.lightway.cc/media/'+item.img"></router-link>
      </div>
      <div class="choseclass-title">
        <p class="choseclass-name">
          {{item.name}}
        </p>
      </div>
    </div>

    <div class="question-wrap" :class="classA">
      <span class="icon" :class="classB"></span>
      <span class="wenhao" @click="showDetail"></span>
        <div class="info-lift" :class="classC">
          <li v-for="(item,index) in infoList"><router-link to="/classDetail">{{item.name}}</router-link></li>
        </div>
        <div class="triangle-topleft" :class="classD">
        </div>
    </div>
    
  </div>
</template>

<script type="text/ecmascript-6">
  const ERR_OK = 1;
  export default {
    props: {
    },
    data() {
      return {
        classA: '',
        classB: '',
        classC: '',
        classD: '',
        classList: [],
        infoList: []
      };
    },
    created() {
      let id = this.$route.params.id;
      this.$http.get('api/opera/course/list/?school_id=' + id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.classList = response.data;
        }
      });
      this.$http.get('/api/infoList').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.infoList = response.data;
        }
      });
    },
    methods: {
       showDetail() {
        if (this.classA === 'background-grey') {
          this.classA = '';
          this.classB = '';
          this.classC = '';
          this.classD = '';
        } else {
          this.classA = 'background-grey';
          this.classB = 'icon-trans';
          this.classC = this.classD = 'fade-enter';
        }
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  /*主要文字 黑 main-fn
  次要文字 灰 se-fn
  预填文字 灰 pre-fn
  描边 灰 border 
  背景 灰白 bg 
  主题 红 theme
  辅助 蓝 assist
  背景 白 bg-white */
  .choseclass-wrap
    margin-bottom: 65px
    .choseclass-item
      margin: 15px 9px 0px 9px
      border: 1px solid $border
      background-color: $bg-white
      border-radius: 5px
      .choseclass-img
        padding: 10px
        height: 200px
        border-1px($border)
        img
          width: 100%
          height: 100%
      .choseclass-title
        margin: 10px
        height: 26px
        border-left: 8px solid $theme
        .choseclass-name
          padding-left: 10px
          font-size: 16px
          line-height: 26px
          color $theme
  .question-wrap
    left: 0
    right: 0
    top: 0
    bottom: 0
    .icon
      display: inline-block
      position: fixed
      bottom: 15px
      right: 25px
      vertical-align: top
      width: 25px
      height: 25px
      background-size: 25px 25px
      background-repeat: no-repeat
      bg-image('question')
    .wenhao
      display: inline-block
      position: fixed
      bottom: 18px
      right: 33px
      vertical-align: top
      width: 10px
      height: 15px
      background-size: 10px 12px
      background-repeat: no-repeat
      bg-image('ask')
    .info-lift
      display: inline-block
      position: absolute
      bottom: 64px
      right: 36px
      padding: 4px 9px
      background-color: $bg
      border-radius: 4px 4px 0px 4px
      opacity: 0
      &.fade-enter
        opacity: 1
        transition: opacity 1.5s  
      li
        font-size: 15px
        color: rgb(33, 33, 33)
        height: 39px
        line-height: 39px
        padding: 0 5px
        border-1px($border)
      li:last-child
        border-1px($border)
    .triangle-topleft
      display: inline-block
      position: absolute
      opacity: 0
      bottom: 44px
      right: 36px
      width: 0
      height: 0
      border-top: 20px solid $border
      border-left: 20px solid transparent
      &.fade-enter
        opacity: 1
        transition: opacity 1.5s      
  .background-grey 
    background-color: rgba(0, 0, 0, 0.50)
    z-index: 1000
    position: fixed;
  .icon-trans
    transform: rotate(145deg)
    transition: transform 0.3s   
</style>
